<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/src/css/swiper-bundle.min.css" />
</head>
<style>
  body,
  html {
    margin: 0;
  }

  .swiper-container {
    margin: 50px auto;
    width: 85%;
    height: 85%;
    max-width: 1200px;
    /* background-color: skyblue; */
  }

  .swiper {
    width: 100%;
    height: 400px;
    background-color: white;
  }

  .time {
    position: relative;
  }

  .swiper2 {
    width: 85%;
    height: 100px;
    /* background-color: tomato; */

  }

  .swiper-item {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 2rem;
    box-sizing: border-box;
  }

  .swiper-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
    opacity: 0;
  }


  .year {
    color: #222;
    font-size: 2.4rem;
  }

  .line {
    width: 2.33rem;
    height: 0.33rem;
    background-color: #0a01b1;
  }

  .content {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.5em;
  }

  .swiper-item:hover img {
    opacity: 1;
  }

  .swiper-item:hover .year {
    color: #ddd;
  }

  .swiper-item:hover .content {
    color: #ddd;
  }

  .swiper-button-prev {
    left: 2%;
  }

  .swiper-button-next {
    right: 2%;
  }

  .time-line {
    /* border: 1px solid #000; */
    position: relative;
    text-align: center;
    /* background-color: tomato; */
    box-sizing: border-box;
  }

  .time-line::before {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #ddd;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .time-line::after {
    content: "";
    width: 10px;
    height: 10px;
    border: 5px solid #ddd;
    border-radius: 50%;
    background-color: #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
  }

  .swiper-slide.swiper-slide-thumb-active::after {
    background-color: #fff;
    border-color: #0a01b1;
  }
</style>

<body>
  <div class="swiper-container">
    <div class="swiper" id="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg1.png" alt="">
            <p class="year">2024</p>
            <p class="line"></p>
            <p class="content">
              云锐科技YRHR全面升级；真人才数字化交付服务体系完善成立香港公司，加速业务出海布局；全国5城一线布局建立，全国落地29家分公司
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg2.png" alt="">
            <p class="year">2023</p>
            <p class="line"></p>
            <p class="content">
              真人才(zhenrencai.com)成立，为企业提供精准高效的人才招聘服务。建立三大支柱服务流程，人才储备30W+,业务覆盖660+城市
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg3.png" alt="">
            <p class="year">2022</p>
            <p class="line"></p>
            <p class="content">
              业财融合实现业务与财务一体化。助力云锐科技YRHR与客户企业提高盈利能力，经营效率与管理
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg4.png" alt="">
            <p class="year">2021</p>
            <p class="line"></p>
            <p class="content">
              数字化系统全面上线，开发海量人才数据库终端，HRO SaaS系统100%客户服务全流程可追渊，招聘云SaaS系统赋能招聘流程化管理，私域人才数据海量沉淀，外包员工管理数据达30W+
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg5.png" alt="">
            <p class="year">2020</p>
            <p class="line"></p>
            <p class="content">
              真人力服务体系完善：六大核心专家团队：商务|招聘|客服I法务技术|财税，赋能企业人力资源管
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg6.png" alt="">
            <p class="year">2019</p>
            <p class="line"></p>
            <p class="content">
              首次入选中国人力资源行业服务100强企业榜单
              <br>
              <br>
              真人力营销体系建立：外包云、招聘云、社保云、薪酬云、福利云、灵工云6大产品矩阵，为企业提供员工从入职到离职全流程全场景人力资源服务。优化企业成本，提升运营效能
            </p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-item">
            <img src="/src/img/swiper/bg7.png" alt="">
            <p class="year">2018</p>
            <p class="line"></p>
            <p class="content">
              云锐科技YRHR在上海静安成立，并建立真人力(zhenrenli.com)，
              <br>
              <br>
              取得®商标
            </p>
          </div>
        </div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
      </div>
    </div>

    <div class="time">
      <div class="swiper swiper2" id="timelineSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide time-line">2024</div>
          <div class="swiper-slide time-line">2023</div>
          <div class="swiper-slide time-line">2022</div>
          <div class="swiper-slide time-line">2021</div>
          <div class="swiper-slide time-line">2020</div>
          <div class="swiper-slide time-line">2019</div>
          <div class="swiper-slide time-line">2018</div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

  <script src="/src/js/swiper-bundle.min.js"></script>
  <script>
    var timelineSwiper = new Swiper("#timelineSwiper", {
      direction: "horizontal",
      slidesPerView: 6,
      // watchSlidesVisibility: true,
      slideToClickedSlide: true,

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    var mySwiper = new Swiper("#swiper", {
      direction: "horizontal",
      slidesPerView: 3,
      spaceBetween: 30,
      // centeredSlides: true,
      thumbs: {
        swiper: timelineSwiper,
        // 默认情况下缩略图swiper 拥有复数的active 索引，设置为false则只有一个索引
        multipleActiveThumbs: false,
      },
      // on: {
      //   slideChangeTransitionEnd: function () {
      //     // 移除所有时间轴项的激活状态
      //     const activeSlides = document.querySelectorAll('.swiper-slide-thumb-active');
      //     activeSlides.forEach(slide => {
      //       slide.classList.remove('swiper-slide-thumb-active');
      //     });

      //     // 只激活当前中心slide对应的时间轴项
      //     if (timelineSwiper && this.realIndex !== undefined) {
      //       const thumbSlide = timelineSwiper.slides[this.realIndex];
      //       if (thumbSlide) {
      //         thumbSlide.classList.add('swiper-slide-thumb-active');
      //       }
      //     }
      //   }
      // }
    });
  </script>
</body>

</html>